<template>
    <div style="padding:10px">
        <div class="report_header_date">
            <queryDate @queryDateClick='queryDateClick'></queryDate>
        </div>
        <div style="padding:10px">
            <el-table :data="tableData" :height="curHeight" border style="width: 100%;">
                <el-table-column prop="createDate" label="日期" width="180">
                    <template slot-scope="{row}">
                        <span>{{ row.createDate | datetimeFormatter }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="balance" label="余额" width="180">
                </el-table-column>
                <el-table-column prop="credit" label="收入" width="180">
                </el-table-column>
                <el-table-column prop="debit" label="支出" width="180">
                </el-table-column>
                <el-table-column prop="type" label="类型" width="180">
                    <template slot-scope="{row}">
                        <span>{{ row.type | typeFilters }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" width="180">
                    <template slot-scope="{row}">
                        <span>{{ row.status | statusFilters }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="memo" label="备注">
                </el-table-column>
            </el-table>
        </div>
        <div class="report_footer_box">
            <pagination style="margin-left: 10px" :total="total" :page.sync="query.pageNum" :limit.sync="query.pageSize" @pagination="loadList"></pagination>
        </div>
    </div>
</template>
<script>
import queryDate from "@/components/Query/queryDate.vue";
import Pagination from "@/components/Pagination";
import { list } from "@/api/enterpriseDeposit";
export default {
    name: "sysMch-capitalFlow",
    data() {
        return {
            total: 0,
            curHeight: null,
            query: {
                pageSize: 20,
                pageNum: 1,
                endDate: "",
                beginDate: "",
                mchId: "",
            },
            tableData: [],
        };
    },

    components: {
        queryDate,
        Pagination,
    },
    filters:{
      typeFilters(val){
        if(val == 0){
          return '收款'
        }else if(val == 1){
          return '退款'
        }else if(val == 2){
          return '提现'
        }else if(val == 3){
          return '奖金'
        }
      },
      statusFilters(val){
        if(val == 0){
          return '未结算'
        }else if(val == 1){
          return '结算中'
        }else if(val == 2){
          return '已完成'
        }
      }
    },
    created() {
        this.query.mchId = this.$route.query.mchId;
        this.loadList();
    },
    mounted() {
        this.comeIn();
        this.beforeMount();
    },
    methods: {
        queryDateClick(data) {
            this.query.beginDate = data.beginDate;
            this.query.endDate = data.endDate;
            this.loadList()
        },
        beforeMount() {
            var _this = this;
            window.onresize = () => {
                return (() => {
                    var h =
                        document.documentElement.clientHeight ||
                        document.body.clientHeight;
                    _this.curHeight = h - 210; //减去页面上固定高度height
                })();
            };
        },
        comeIn() {
            console.log("222");
            var _this = this;
            var h =
                document.documentElement.clientHeight ||
                document.body.clientHeight;
            this.curHeight = h - 210; //减去页面上固定高度height
        },
        loadList() {
            var _this = this;
            list(_this.query).then((res) => {
                console.log(res);
                _this.tableData = res.data.data;
                _this.total = res.data.total
            });
        },
    },
};
</script>
<style scoped>
.report_header_date {
    box-sizing: border-box;
    margin-left: 10px;
    width: 260px;
    margin-top: 5px;
}
.report_footer_box {
    width: 100%;
    border-top: none;
    height: 40px;
    display: flex;
    align-items: center;
    background-color: white;
}
</style>